<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DOM</title>
  <style>
    .productBox {
      width: 300px;
      height: auto;
      margin: 5px;
      padding: 3px;
      border-color: cadetblue;
      border-width: 1px;
      border-style: solid;
    }

    .productTitle {
      height: 20px;
      margin: 0 0 5px 0;
      padding: 3px;
      background-color: gainsboro;
    }

    .productTag {

      background-color: khaki;
    }

    .des {
      border-color: rgb(151, 154, 155);
      border-width: 1px;
      border-style: dotted;
    }
  </style>
</head>
<!--网页主要内容部分-->

<body>
<div class="productBox" id="app" name="myapp">
  <div class="productTitle">苹果15元一斤</div>
  <span class="productTag">标签：水果、苹果、生鲜</span>
  <p class="des">这个苹果是东南亚苹果，超级好吃。这个苹果是东南亚苹果，超级好吃这个苹果是东南亚苹果，超级好吃.</p>
</div>
</body>
<!--动态JS脚本部分-->
<script>

  //=======================================
  //getElementById
  console.log("getElementById============>");
  let app = document.getElementById("app");
  console.log(app);

  //=======================================
  //getElementsByName
  console.log("getElementsByName============>");
  let myapp = document.getElementsByName("myapp");
  console.log(myapp[0]);

  //=======================================
  //getElementsByClassName
  console.log("getElementsByClassName============>");
  let box = document.getElementsByClassName("productBox");
  console.log(box[0]);

  //=======================================
  //getElementById取得app元素
  //let app = document.getElementById("app");
  //createElement
  console.log("createElement============>");
  var button = document.createElement("button");
  //createTextNode
  var text = document.createTextNode("保存");
  //用appendChild把text放到button里
  button.appendChild(text);
  //用appendChild把button放到app里
  //app.appendChild(button);
  // console.log("app.childNodes-->length=",app.childNodes.length);
  // app.childNodes.forEach(item=>{
  //   console.log("item=>>>>>>",item);
  // });
  app.insertBefore(button, app.childNodes[0]);

  //=======================================
  //删除
  console.log("删除remove============>");
  let element = document.getElementsByTagName("p");
  element[0].remove();

  //=======================================
  //1、先创建一个新标签
  console.log("更改replaceChild============>");
  let newElement = document.createElement("li");

  newElement.appendChild(document.createTextNode("这是一个li标签"))
  //2、取当前节点(上面已经取)
  //let app = document.getElementById("app");
  //3、找要替换的对象
  let oldElement = document.getElementsByTagName("button")[0];
  //4、替换其下子节点
  app.replaceChild(newElement, oldElement);

  //=======================================
  //创建一个属性样式
  console.log("设置属性setAttribute============>");
  let style = document.createAttribute("style");
  style.value = "background-color: burlywood;";
  //新增属性样式
  newElement.setAttributeNode(style);
  newElement.setAttribute("style", "background-color: red;");

  //=======================================
  //查找父节点
  console.log("查找父节点============>");
  let parent = app.parentNode;
  console.log(parent);

  //=======================================
  //下一个节点
  console.log("兄弟节点============>");
  let nextSibling = app.nextSibling;
  //上一个节点
  let previousSibling = app.previousSibling;
  console.log(nextSibling);

  //=======================================
  console.log("查找子节点============>");
  console.log("1.children找子节点");
  //children找子节点
  let childrens = app.children;
  console.log("childrens-->length=", childrens.length);
  for(index in childrens) {
    console.log(`${index}==>`,childrens[index]);
  }

  console.log("2.childNodes找子节点");
  //childNodes找子节点
  let childNodes = app.childNodes;
  console.log("childNodes-->length=", childNodes.length);
  childNodes.forEach(item => {
    console.log("item=>>>>>>", item);
  });

  // var booleanValue = app.hasChildNodes();

</script>

</html>